<template>
  <div class="change_admin staffManage">
    <el-dialog
      :title="title"
      class="gl_dialog_TitleLine"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="880px"
    >
      <el-form ref="form" class="gl_form_mini" :model="StaffManagementVO" label-width="120px" label-position="right" style="padding-right: 30px;" :rules="staffManagementVO_Rules">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-row :gutter="20">
              <el-col :span="24">
                <el-form-item label="登录账号" prop="loginAccount">
                  <el-input v-if="title==='新增'" v-model="StaffManagementVO.loginAccount" size="mini" clearable />
                  <el-input v-else v-model="StaffManagementVO.loginAccount" size="mini" :disabled="true" clearable />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="登录密码" prop="password">
                  <el-input v-model="StaffManagementVO.password" size="mini" :type="passwordType">
                    <el-button slot="append" class="show-pwd" @click="showPwd">
                      <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
                    </el-button>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="确认密码" prop="repassword">
                  <el-input v-model="StaffManagementVO.repassword" size="mini" :type="confirmPasswordType">
                    <el-button slot="append" class="show-pwd" @click="showConfirmPwd">
                      <svg-icon :icon-class="confirmPasswordType === 'password' ? 'eye' : 'eye-open'" />
                    </el-button>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="角色权限" prop="rolePermissions">
                  <el-select v-model="StaffManagementVO.rolePermissions" size="mini" filterable>
                    <el-option v-for="(data,index) in employee" :key="index" :label="data.label" :value="data.label" />
                  </el-select></el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="名称" prop="name">
                  <el-input v-model="StaffManagementVO.name" size="mini" clearable />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="员工类型" prop="employeeType">
                  <el-select v-model="StaffManagementVO.employeeType" size="mini" filterable>
                    <el-option v-for="(data,index) in employee" :key="index" :label="data.label" :value="data.label" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row :gutter="20">
              <el-col :span="24">
                <el-form-item label="头像" prop="time">
                  <el-upload
                    class="avatar-uploader"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                  >
                    <img v-if="StaffManagementVO.avatar" :src="StaffManagementVO.avatar" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon" />
                  </el-upload>
                  <!-- <upload-file
                    ref="uploadFile"
                  >
                    <img v-if="StaffManagementVO.avatar" :src="StaffManagementVO.avatar" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon" />
                  </upload-file> -->
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="close()">取消</el-button>
        <el-button type="primary" size="mini" @click="saveNew('form')">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { StaffManagementVO } from '@/lib/form/system.js';
import validator from '@/lib/validate/index.js';
import { translateByCode } from '@/lib/getTransData';
// import uploadFile from '@/components/UploadFile';
export default {
  name: 'Account',
  // components: {
  //   uploadFile
  // },
  data() {
    return {
      // formData: {
      //   type: '',
      //   name: '',
      //   address: ''
      // },
      passwordType: 'password',
      confirmPasswordType: 'password',
      StaffManagementVO: new StaffManagementVO(),
      staffManagementVO_Rules: {
        loginAccount: [
          validator.required('手机号不能为空'),
          {
            validator(rule, value, callback) {
              callback(validator.checkPhone(value, translateByCode('rules.validTelephone')));
            },
            trigger: 'blur'
          }
        ],
        rolePermissions: [
          {
            required: true,
            message: '请选择',
            trigger: 'change'
          }
        ],
        avatar: [
          {
            required: true,
            message: '有效时长不能为空',
            trigger: 'blur'
          }
        ],
        name: [
          {
            required: true,
            message: '有效次数不能为空',
            trigger: 'blur'
          }
        ],
        employeeType: [
          {
            required: true,
            message: '价格',
            trigger: 'change'
          }
        ],
        password: [
          validator.required(translateByCode('rules.requiredPassword')),
          {
            validator (rule, value, callback) {
              callback(validator.checkPwd(value, translateByCode('rules.validPassword')));
            },
            trigger: 'blur'
          }
        ],
        repassword: [
          validator.required(translateByCode('rules.requiredPassword')), // 必填项
          {
            validator (rule, value, callback) { // 验证密码格式
              callback(validator.checkPwd(value, translateByCode('rules.validPassword')));
            },
            trigger: 'blur'
          },
          {
            validator: (rule, value, callback) => { // 两次输入是否一致
              if (value !== this.StaffManagementVO.password) {
                callback(new Error('erroe'));
              } else {
                callback();
              }
            },
            trigger: 'blur',
            message: translateByCode('rules.different')
          }
        ]
      },
      title: '',
      dialogVisible: false,
      employee: [ // 员工类型
        {
          value: 'management',
          label: '管理员'
        },
        {
          value: 'superManagement',
          label: '超级管理员'
        }
      ]
    };
  },
  // created() {
  //   this.$refs.uploadFile.upload();
  // },
  methods: {
    // 切换密码显示状态
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = '';
      } else {
        this.passwordType = 'password';
      }
    },
    // 切换确认密码显示状态
    showConfirmPwd() {
      if (this.confirmPasswordType === 'password') {
        this.confirmPasswordType = '';
      } else {
        this.confirmPasswordType = 'password';
      }
    },
    onSubmit() {
      console.log('submit!');
    },
    open(row) {
      if (row === 'add') {
        this.title = '新增';
        this.StaffManagementVO = new StaffManagementVO();
      } else {
        this.title = '编辑';
        this.StaffManagementVO = JSON.parse(JSON.stringify(row));
      }
      this.dialogVisible = true;
      console.log(row);
      // this.form = row;
    },
    close() {
      this.dialogVisible = false;
      this.$refs.form.resetFields();
    },
    // 点击确定添加
    saveNew(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.title === '新增') {
            const StudentCardData = this.StaffManagementVO;
            this.$emit('pushTabelData', JSON.parse(JSON.stringify(StudentCardData)));
            console.log(this.StaffManagementVO);
          } else {
            console.log(this.StaffManagementVO);
          }
        } else {
          return false;
        }
      });
    },
    // handleChange (file, fileList) {
    //   this.ruleForm.imageUrl = URL.createObjectURL(file.raw);
    // },

    // beforeUpload(file) {
    //   return true;
    // },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    handleAvatarSuccess(res, file) {
      console.log('file');
      console.log(file);
      this.StaffManagementVO.avatar = JSON.parse(JSON.stringify(URL.createObjectURL(file.raw)));
    }
    // ,
    // handleAvatarSuccess1(res, fileList) {
    //   console.log('fileList');
    //   console.log(fileList);
    //   this.StaffManagementVO.avatar = JSON.parse(JSON.stringify(URL.createObjectURL(file.raw)));
    // }
  }
};
</script>

<style>
.staffManage .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.staffManage .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}
.staffManage .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
}
.staffManage .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }
</style>
